<template>
  <!-- 菜单管理 -->
  <div id="MenuManage" class="content-main">
    <el-row>
      <!-- 左边的编辑框 -->
      <el-col :span="demoData === 1?10:24" style="min-height: inherit; padding: 0px 0px 0px 0px;overflow: auto;">
        <el-card style="height: calc( 100vh - 85px); overflow: auto">
          <div class="btn-group title">
            <el-button v-permission="'MenuManage-add'" type="primary" plain size="mini" @click="addMenu">
              <i class="el-icon-plus" /> 新增菜单
            </el-button>
          </div>
          <div style="border-bottom: 1px solid #000; margin-bottom: 15px" />
          <div class="permission-group">
            <div class="search-group" style="margin-bottom:15px">
              <el-input v-model.trim="filterText" placeholder="请输入菜单名称">
                <i slot="prefix" class="el-input__icon el-icon-search" />
              </el-input>
            </div>
            <el-tree ref="tree" :data="tableData" node-key="id" :props="defaultProps" :filter-node-method="filterNode">
              <span slot-scope="{ node, data }" class="custom-tree-node">
                <span>{{ node.label }}</span>
                <span>
                  <el-button v-permission="'MenuManage-edit'" size="mini" type="text" icon="el-icon-edit" style="width:26px;height:26px" circle @click="editMenu(data)" />
                  <el-button v-permission="'MenuManage-delete'" size="mini" type="text" icon="el-icon-delete" style="width:26px;height:26px" circle @click="() => deleteMenu(data)" />
                </span>
              </span>
            </el-tree>
          </div>
        </el-card>
      </el-col>
      <!-- 右边的编辑框 -->
      <el-col id="rightcol" v-permission="'MenuManage-add'" :span="14" style="min-height: inherit; padding: 0px 0px 0px 7px">
        <el-card style="height: calc( 100vh - 85px); overflow: auto">
          <div class="form-title title" style="margin-top:-3px">
            <i class="el-icon-s-grid" style="color: rgb(24, 144, 255); font-size: 18px" />
            <span style="margin-left: 5px;margin-top:-2px">{{ MenuName }}</span>
          </div>
          <div style="border-bottom: 1px solid #000; margin: 11px 0" />

          <el-form v-if="publicShow" size="mini" label-width="100px">
            <el-form-item label="菜单名称：">
              <el-input v-model.trim="menuData.menuName" placeholder="请输入菜单名称" />
            </el-form-item>
            <el-form-item label="菜单路径：">
              <el-input v-model.trim="menuData.menuUrl" placeholder="请输入菜单路径" />
            </el-form-item>
            <el-form-item label="排序：">
              <el-input-number v-model="menuData.menuSort" :min="1" controls-position="right" />
            </el-form-item>
            <el-form-item label="上级菜单：">
              <el-select ref="selectParent" v-model="menuData.parentId" style="width:100%" placeholder="请选择上级菜单">
                <el-option :value="menuData.parentId" :label="parentValue" style="height:200px;overflow:auto">
                  <el-tree :data="rootTableData" node-key="id" :props="defaultProps" accordion @node-click="parentClick" />
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="菜单类型：">
              <el-radio-group v-model="menuData.menuType">
                <el-radio :label="0">菜单</el-radio>
                <el-radio :label="1">页面</el-radio>
                <el-radio :label="2">按钮</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <el-button v-if="editMenuShow" type="primary" @click="editMenuClick">修改</el-button>
              <el-button v-if="addMenuShow" type="primary" @click="addMenuClick">新增</el-button>
              <el-button @click="cancelShow">取消</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  queryMenu,
  addMenuApi,
  editMenuApi,
  deleteMenuApi,
} from "@/api/manage";
import { Message } from "element-ui";
import permission from "@/permission/index.js"; // 权限判断指令
export default {
  name: "MenuManage",
  directives: { permission },
  data() {
    return {
      // 传输数据的 重置名字
      defaultProps: {
        children: "child",
        label: "menuName",
      },
      // 查询数据
      queryObj: {
        userName: "", // 登录ip
      },
      // 提交或者修改的数据
      menuData: {
        menuName: "", // 菜单名称
        menuUrl: "", // 菜单路径
        menuSort: 1, // 排序
        parentId: "", // 上级菜单
        menuType: 0, // 菜单类型
        id: 0,
      },
      listLoading: true,
      tableData: [],
      // 根目录
      rootTableData: [],
      // 新增菜单显示
      addMenuShow: false,
      // 编辑菜单显示
      editMenuShow: false,
      // 公用菜单显示
      publicShow: false,
      // 右侧编辑菜单名
      MenuName: "编辑菜单",
      // 上级菜单lable 显示文字
      parentValue: 0,
      // 搜索框绑定数据
      filterText: "",
      // 判断右侧菜单是否显示
      demoData: 1,
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  mounted() {
    this.queryData();
    // console.log(document.getElementById('rightcol'))
    if (document.getElementById("rightcol") === null) {
      this.demoData = 2;
    }
  },
  methods: {
    /** 获取页面数据*/
    async queryData() {
      this.listLoading = true;
      const res = await queryMenu(this.queryObj);
      this.tableData = JSON.parse(JSON.stringify(res.data.data));
      this.rootTableData = JSON.parse(JSON.stringify(res.data.data));
      this.rootTableData.unshift({ id: 0, menuName: "根目录", child: [] });
      this.listLoading = false;
    },

    // 新增菜单
    addMenu() {
      this.MenuName = "新增菜单";
      this.editMenuShow = false;
      this.addMenuShow = true;
      this.publicShow = true;
      this.resetMenu();
    },
    // 新增后的重置名称路径
    resetMenu() {
      this.menuData.menuName = "";
      this.menuData.menuUrl = "";
      this.menuData.id = 0;
    },
    // 新增菜单确认按钮
    async addMenuClick() {
      if (
        this.menuData.menuName === "" ||
        this.menuData.menuUrl === "" ||
        this.menuData.parentId === ""
      ) {
        Message.error("创建失败，选项没有填选完整");
        return;
      }
      this.menuData.id = 0;
      await addMenuApi(this.menuData);
      Message.success("新增成功");
      this.queryData();
      this.resetMenu();
    },
    // 编辑菜单
    editMenu(data) {
      this.MenuName = "编辑菜单";
      this.addMenuShow = false;
      this.editMenuShow = true;
      this.publicShow = true;
      // console.log(this.rootTableData, '目录菜单')
      this.menuData.id = data.id;
      this.menuData.menuName = data.menuName;
      this.menuData.menuSort = data.menuSort;
      this.menuData.menuType = data.menuType;
      this.menuData.menuUrl = data.menuUrl;
      this.menuData.parentId = data.parentId;
      // console.log(this.menuData, data, 123123)
      this.rootTableData.forEach((item) => {
        if (item.id === data.parentId) {
          // console.log(123, item.menuName)
          this.parentValue = item.menuName;
        }
        // console.log(item.child)
        if (item.child.length > 0) {
          item.child.forEach((value) => {
            // console.log(value, 'value')
            if (value.id === data.parentId) {
              // console.log(123, item.menuName)
              this.parentValue = value.menuName;
            }
          });
        }
      });
    },
    // 编辑菜单的修改按钮功能
    async editMenuClick() {
      // console.log(this.menuData)
      await editMenuApi(this.menuData);
      this.queryData();
      Message.success("修改成功");
    },
    // 菜单取消功能
    cancelShow() {
      this.MenuName = "编辑菜单";
      this.addMenuShow = false;
      this.editMenuShow = false;
      this.publicShow = false;
      this.menuData = {
        menuName: "", // 菜单名称
        menuUrl: "", // 菜单路径
        menuSort: 1, // 排序
        parentId: "", // 上级菜单
        menuType: 0, // 菜单类型
        id: 0,
      };
    },
    // 上级菜单的option点击
    parentClick(data, node, self) {
      // console.log(data, node, self, '123')
      this.parentValue = data.menuName;
      this.menuData.parentId = data.id;
      // console.log(data.parentId)
      this.$refs.selectParent.blur();
    },
    // 删除菜单
    deleteMenu(data) {
      // const parent = node.parent
      // const children = parent.data.children || parent.data
      // const index = children.findIndex(d => d.id === data.id)
      // children.splice(index, 1)
      // console.log(data)
      this.$confirm("确认删除该菜单吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          // console.log('确认')
          await deleteMenuApi([data.id]);
          this.queryData();
        })
        .catch(() => {
          // console.log('取消')
        });
    },
    // 搜索菜单
    filterNode(value, data) {
      if (!value) return true;
      return data.menuName.indexOf(value) !== -1;
    },
  },
};
</script>

<style lang="scss" scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.app-container {
  .roles-table {
    margin-top: 30px;
  }
  .permission-tree {
    margin-bottom: 30px;
  }
}
</style>
<style lang="scss">
.ivu-tree-title {
  span {
    color: #000;
  }
}
</style>
<style scoped lang="scss">
.content-main {
  min-height: 88vh;
}
.left-content {
  padding: 5px;
}
.btn-group {
  display: flex;
  margin-bottom: 15px;
  margin-top: -7px;
}
.tree-group {
  // overflow-y: auto;
  height: inherit;
  max-height: 72vh;
  margin-top: 10px;
}
.title {
  min-height: 33px;
}
.form-title {
  display: flex;
  align-items: center;
}
</style>
